<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <!-- 引入bootstarp -->
    <script type="text/javascript" src="../js/bootstrap3/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../js/bootstrap3/css/bootstrap.css">
    <!-- 引入bootstrap table的css、js -->
    <link type="text/css" rel="stylesheet" href="../js/bootstrap-table/bootstrap-table.css">
    <script type="text/javascript" src="../js/bootstrap-table/bootstrap-table.js"></script>
    <script type="text/javascript" src="../js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <!-- 引入bootstrap datetime的css、js -->
    <link type="text/css" rel="stylesheet" href="../js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
    <script type="text/javascript" src="../js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="../js/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
</head>
<body background="../js/images/8img.jpg">
<div class="panel panel-default">
    <div class="panel-heading">
        高级搜索
    </div>
    <div class="panel-body">
        <div class="container-fluid">
            <form class="form-horizontal">
                <div class="form-group">

                    <label for="userName" class="col-sm-2 control-label">用户的名字</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="userName"/>
                    </div>

                    <label for="searchTime" class="col-sm-2 control-label">成交时间</label>
                    <div class="col-sm-5">
                        <div class="input-group" id="searchTime">
                            <input type="text" class="form-control date" id="searchStartTime"/>
                            <div class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></div>
                            <input type="text" class="form-control date" id="searchEndTime"/>
                        </div>
                    </div>

                </div>
                <div class="form-group">
                    <div class="col-sm-12">
                        <center>
                            <button onclick="searchBook()" type="button" class="btn btn-info"><i class="glyphicon glyphicon-search"></i> 搜索</button>
                        </center>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div id="toolbar">
</div>
<table border="2" class="table" id="bookTable" style="background: #1cbcd8"></table>

</body>
<script>
    $(function(){
        initBookType();
        initBookTable();
    })

    function initBookType(){
        $.post('../wjs/shangpin',{},function(data){
            var html = '<option value="-1">请选择</option>';
            for (var i = 0; i < data.length; i++) {
                html += '<option value="'+data[i].storeId+'">'+data[i].productName+'</option>';
            }
            $("#searchType").html(html);
        })
    }

    function searchBook(){
        $("#bookTable").bootstrapTable('refresh',{
            query:{
                page:'1',
            }
        });
    }
    function initBookTable(){
        $("#bookTable").bootstrapTable({
            toolbar:'#toolbar',
            url:'../wjs/findUserList',
            method:'post',
            contentType:'application/x-www-form-urlencoded',//post请求按照表单方式
            pagination:true,
            pageSize:5,
            pageList:[2,5,6],
            pageNumber:1,
            clickToSelect: true,         //是否启用点击选中行
            sidePagination:'server',        //分页方式：client客户端分页，server服务端分页
            striped:true,          //斑马线
            queryParams:function(){
                var userName = $("#userName").val();              //买家
                var startTime = $("#searchStartTime").val();      //成交时间
                var endTime = $("#searchEndTime").val();
                return {
                    page:this.pageNumber,
                    rows:this.pageSize,
                    userName:userName,
                    startTime:startTime,
                    endTime:endTime
                };
            },
            columns:[
                {field:'productName',title:'商品名称',width : 200},
                {field:'productImg',title:'商品图片',width : 200,formatter:function (value,row,index){
                        return '<img src="'+value+'" width="50px" height="50px">'
                    }},
                {field:'productPrice',title:'商品价格',width : 200},
                {field:'dingdanshuliang',title:'数量',width : 200},
                {field:'userName',title:'用户的名字',width : 200},
                {field:'orderPrice',title:'订单总价',width : 200},
                {field:'orderCreateTime',title:'下单时间',width : 200},
                {field:'jiaoyitai',title:'交易状态',width : 200,formatter:function (value,row,index){
                        if(value==1){
                            return "待付款";
                        }else if(value==2){
                            return "待发货";
                        }else{
                            return "待评价";
                        }
                    }}
            ]
        })
    }


    $('.date').datetimepicker({
        language: 'zh-CN',//显示中文
        format: 'yyyy-mm-dd hh:ii:ss',//显示格式
        minView: "month",//设置只显示到月份
        initialDate: new Date(),//初始化当前日期
        autoclose: true,//选中自动关闭
        todayBtn: true//显示今日按钮
    });
</script>
</html>